<template>
  <div>
    <div class="mySwiper swiper-container">
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
        <div class="swiper-slide">4</div>
        <div class="swiper-slide">5</div> -->
        <div class="swiper-slide" v-for='item in data' :key="item">{{item}}</div>

      </div>
    </div>
  </div>
</template>

<script>
//引入css
import "swiper/swiper-bundle.min.css";
//引入js 引入构造函数
import Swiper from "swiper";
export default {
  props:{
    data:{
      require:true,
      type:Array
    }
  },
  data() {
    return { swiper: null }
  },
  mounted() {
    //新增一个轮播项不会在页面不会显示，需要更新钩子函数中再次初始化
    this.swiper=new Swiper(".mySwiper", {
      loop: true,
    });
  },
  updated(){
    // this.swiper=new Swiper(".mySwiper", {
    //   loop: true,
    // });
    //实例下面有个update方法，直接初始化
    this.swiper.update()
  }
};
</script>

<style lang="scss" scoped>
</style>